<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 1.新增元素 -->
    <!-- <div class="one">
        这是一个div
    </div>
    <span>i am a span</span> -->

    <ul>
        <li>1</li>
        <li>2</li>
    </ul>
    <script>
        // // 第一步：添加一个元素
        // let input = document.createElement('input');
        // input.value = '新增元素';
        // // 第二步：把元素放入DOM树中
        // let div = document.querySelector('.one');
        // div.appendChild(input);

        let ul1 = document.querySelector('ul');
        for(let i=3; i < 10; i++){
            let li = document.createElement('li');
            li.innerHTML = i;
            ul1.appendChild(li);
        }
    </script>
    <!-- 2.删除元素 -->
    <script>
        let deleteLi = document.querySelectorAll('li')[3];
        let ul2 = document.querySelector('ul');
        ul2.removeChild(deleteLi);
    </script>
</body>
</html>